<template>
	<up-sticky>
		<!-- #ifdef MP-WEIXIN -->
		<view class="navigator_header display_flex"
			:style="{'paddingTop':(isWxHandle?statusBarHeight:navHeight)+'px','background':props.bgcColor,'height':isWxHandle?'80rpx':'88rpx'}">
		<!-- #endif -->
			<!-- #ifdef APP || H5 -->
			<view class="navigator_header display_flex" :style="{'background':props.bgcColor}">
			<!-- #endif -->
				<view class="navigator_left" style="margin-left:32rpx;">
					<view v-if="isBack">
						<up-icon @click="goBack" v-if="isBackPage()" name="arrow-left" :color="fontColor" size="20"></up-icon>
						<up-icon @click="goHome" v-else name="home" :color="fontColor" size="20"></up-icon>
					</view>
					<!-- <image style="width: 18rpx;height: 30rpx;" @click="goBack"  src="http://112.124.50.179:8888/imgs/back.png" mode=""></image> -->
				</view>
				<view class="navigator_middle">
					<view class="navigator_title" :style="{'color':props.fontColor}">{{props.title}}</view>
				</view>
				<view class="navigator_right" style="margin-right:32rpx;">
					<slot name="rightWrap"></slot>
				</view>
			</view>
	</up-sticky>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onMounted,
		ref
	} from 'vue'
	const navHeight = getApp().globalData.navHeight  //考虑微信胶囊
	const statusBarHeight = getApp().globalData.statusBarHeight  //不考虑微信胶囊

	const props = defineProps({
		title: {
			type: String,
			required: true,
			default: ''
		},
		bgcColor: {
			type: String,
			required: true,
			default: '#121512'
		},
		fontColor: {
			type: String,
			required: true,
			default: '#fff'
		},
		isBack:{
			type: Boolean,
			default: true
		},
		//是否遮盖胶囊，默认遮盖
		isWxHandle:{
			type:Boolean,
			default:true
		}
	})

	const goBack = () => {
		uni.navigateBack()
	}
	
	const goHome = ()=>{
		uni.reLaunch({
			url:'/pages/home/index/index'
		})
	}

	/**
	 * 判断是否有返回页面
	 */
	const isBackPage = ()=>{
		
		// 获取当前页面栈数组
		const pages = getCurrentPages();
		 
		// 获取数组中最后一个元素，即当前页面的实例
		const currentPage = pages[pages.length - 1];
		 
		// 判断是否有返回页面
		if (pages.length > 1) {
		  // 有返回页面
		  return true
		} else {
		  // 没有返回页面
		  return false
		}
	}
</script>

<style lang="scss" scoped>
	.navigator_header {
		width: 100%;
		height: 88rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		.navigator_left,
		.navigator_right {
			flex: 3;
		}

		.navigator_middle {
			flex: 5;
			flex-shrink: 0;
		}

		.navigator_left .btn-back {
			width: 80rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			font-weight: normal;
			padding: 0;
			background: none;
		}

		.navigator_middle .navigator_title {
			width: 100%;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 0 auto;
			font-weight: 400;
			font-size: 32rpx;
			line-height: 32rpx;
		}
	}
</style>